<extend name="Public/common"/>
<block name="othercss">
    <style>
        body {
            background: #F8F8F8;
        }
        .item {
            display: flex;
            flex-direction: row;
            height: 52px;
            width: 100%;
            background: #FFF;
            border-bottom: 1px solid #F2F2F2;
            justify-content: center;
        }

        .item-icon {
            width: 19px;
            height: 19px;
        }

        .a_btn_code {
            width: 76px;
            line-height: 29px;
            background: #d10015;
            color: #FFF;
            font-size: 13px;
            text-align: center;
            border-radius: 5px;
        }

        .a_btn_code_dis {
            background: #D2D2D2;
        }

        .am-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        input {
         border: 0;
            line-height: 25px;
        }

        .am-input {
            font-size: 14px;
        }

        .a_btn{
            width:303px;
            line-height: 44px;
            border-radius: 5px;
            text-align: center;
            background: #d10015;
            color:#FFF;
        }
    </style>

</block>

<block name="header">
    <div class="header">
        <div class="clearfix box">
            <!--<a class="save">保存</a>-->
            <a class="return" href="javascript:history.back(-1)"><i class="return-icon"></i></a>
            <h2>欢迎加入</h2>
        </div>
    </div>
</block>
<block name="body">
    <div class="container pt50">
        <!--顶部banner-->
        <div>
            <image src="{$banner}"></image>
        </div>
        <form action="/Phone/Extension/login" method="post" id="test_from">
            <input type="hidden" name="exu_code" value="{$exu_code}" id="exu_code">
            <div class="form-bg">
                 <!--请输入手机号码-->
                <div class="item">
                    <div class="am-column" style="margin-right: 22px;">
                        <image class="item-icon" src="__PUBLIC__/phone/images/sj.png"></image>
                    </div>

                    <div class="am-column" style="width:calc(100% - 198px);">
                        <input type="number" placeholder="请输入手机号码" maxlength="11" class="am-input" name="phone" id="phone">
                    </div>

                    <div class="am-column" style="padding-right: 29px;">
                        <a class="a_btn_code" onclick="phone_code(this)">获取验证码</a>
                    </div>
                </div>

                <!--动态验证码-->
                <div class="item">
                    <div class="am-column" style="margin-right: 22px;">
                        <image class="item-icon" src="__PUBLIC__/phone/images/yzm.png"></image>
                    </div>
                    <div class="am-column" style="
            width:calc(100% - 91px);">
                        <input type="number" name="code" placeholder="6位动态验证码" class="am-input" id="code">
                    </div>
                </div>

                <!--请输入密码-->
                <div class="item">
                    <div class="am-column" style="margin-right: 22px;">
                        <image class="item-icon" src="__PUBLIC__/phone/images/mm.png"></image>
                    </div>
                    <div class="am-column" style="width:calc(100% - 91px);">
                        <input type="password" placeholder="请输入登录密码" name="password" class="am-input" id="password">
                    </div>
                </div>
            </div>
            <div style="text-align: center;margin-top:43px;">
                <button type="button" class="a_btn" onclick="btn()">立即注册</button>
            </div>
        </form>
    </div>
</block>
<block name="footer"></block>
<block name="otherjs">
    <script>
        let status = true;
        let time   = 60;
        let but    = '';
        function phone_code(obj) {
            let phone  = document.getElementsByName('phone')[0].value;
            if (status == false) {
                return;
            }
            if (phone.length != 11) {
                return layer.msg('手机号格式有误');
            }
            $.get('/Phone/Ajax/sendmsg',{phone:phone},function (e) {
                if (e.status == '0') {
                    return layer.msg(e.info);
                }
                if (e.status == '1')  {
                    if (status) {
                        obj.setAttribute('class', 'a_btn_code a_btn_code_dis');
                        obj.innerHTML = time + 's';
                        status = false;
                    }
                but = setInterval(function () {
                        time -= 1;
                        obj.innerHTML = time + 's';
                        if (time == 0) {
                            obj.setAttribute('class', 'a_btn_code');
                            obj.innerHTML = '获取验证码';
                            status = true;
                            time = 60;
                            clearInterval(but)
                        }
                    },1000)
                }
            });
        }

        function btn() {
            let phone    = document.getElementById('phone').value;
            let code     = document.getElementById('code').value;
            let password = document.getElementById('password').value;
            let exu_code   = document.getElementById('exu_code').value;

            if (phone.length != 11) {
                return layer.msg('手机号有误');
            }
            if (code.length != 6) {
                return layer.msg('验证码格式有误');
            }
            if (password.length < 8) {
                return layer.msg('密码长度至少8位');
            }

            $.post('/Phone/Extension/login', {phone:phone,code:code,password:password,exu_code:exu_code},function (e) {
                if (e == '0') {
                    layer.msg('验证码有误');
                }
                if (e == '1') {
                    setTimeout(function () {
                        window.location.href = '/Phone';
                    }, 1000);
                    layer.msg('注册成功');
                }
                if (e == '2') {
                    layer.msg('系统繁忙请稍后再试');
                }
            })
        }
    </script>
</block>